<!--
 * @Description: 新建、编辑DSCP
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-05 11:01:39
 * @LastEditTime: 2021-11-11 16:24:35
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" label-position="right">
      <!-- 名称 -->
      <el-form-item label="名称" prop="displayName">
        <el-input v-model="form.displayName" maxlength="100"></el-input>
      </el-form-item>
      <!-- 应用 -->
      <el-form-item label="应用" prop="aclName">
        <el-select v-model="form.aclName" style="width:100%;">
          <el-option
            v-for="(item, index) in data"
            :key="index"
            :value="item.aclName"
            :label="item.displayName"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- DSCP -->
      <el-form-item label="DSCP值" prop="dscp">
        <el-input placeholder="请输入DSCP值，范围：1-63" v-model.number="form.dscp" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus', 'data'],
  data () {
    return {
      wanlist: [],
      dialogTitle: '',
      form: {
        displayName: null,
        aclName: null,
        priorityLevel: null,
        dscp: null
      },
      rules: {
        displayName: [{
          required: true,
          message: '请填写名称',
          trigger: 'blur'
        }],
        aclName: [{
          required: true,
          message: '请选择应用',
          trigger: 'change'
        }],
        dscp: [{
          required: true,
          message: '请输入DSCP值',
          trigger: 'blur'
        }, {
          type: 'number',
          min: 1,
          max: 63,
          message: '范围：1-63',
          trigger: 'blur'
        }]
      }
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.dialogTitle = '新建DSCP';
          _this.form = {
            displayName: null,
            aclName: null,
            dscp: null
          };
        }
      }
    }
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('handleDialog', false);
      _this.$refs['ruleForm'].resetFields();
    },
    // 确认
    onSubmit () {
      let _this = this;
      _this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let params = {
            name: _this.form.displayName,
            neId: _this.ne.id,
            dgId: _this.ne.dgId,
            siteId: _this.ne.extAttrs.siteId,
            aclName: _this.form.aclName,
            dscp: _this.form.dscp
          };
          if (_this.type === 'create') {
            _this.$http.post({
              url: '/api/sdwan/dscp/create',
              data: params
            }).then(res => {
              let { status } = res;
              if (status === '0') {
                _this.$message.success('创建成功！');
                _this.$parent.reset();
                _this.cancel();
              }
            });
          }
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ip-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 75%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input:last-child {
    width: 20%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
.ip-port-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 50%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input {
    width: 20%;
  }
  ::v-deep .el-input:last-child {
    width: 20%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
</style>